'use client' // 添加这行来将此组件标记为客户端组件

import Link from 'next/link'
import AnnouncementList from '@/components/experiments/AnnouncementList'
import {SessionProvider, useSession} from 'next-auth/react' // 假设 next-auth 用于会话管理
import Button from '@/components/ui/Button' // 假设有这个UI组件
import AutoProvider from '@/components/providers/SessionProvider'

const GLOBAL_EXPERIMENT_ID_PLACEHOLDER = 'clxyzabc00001234567890ab'


export default function Home() {
  const { data: session } = useSession()
  const isTeacherOrAdmin = session?.user?.role === 'TEACHER' || session?.user?.role === 'ADMIN'

  return (
    <div className="min-h-screen bg-gray-100">
      <main className="container mx-auto px-4 py-8">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">
            欢迎使用实验管理平台
          </h1>
          <p className="text-xl text-gray-600 mb-8">
            高效管理实验资源、设备和实验进度
          </p>
          <div>
            <Link
              href="/experiments"
              className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700"
            >
              进入系统
            </Link>
          </div>
        </div>

        <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
          <FeatureCard
            title="实验管理"
            description="高效管理实验资源和状态"
            icon={<BeakerIcon className="h-8 w-8" />}
          />
          <FeatureCard
            title="实验进度追踪"
            description="实时监控实验进度，记录实验数据"
            icon={<ChartBarIcon className="h-8 w-8" />}
          />
          <FeatureCard
            title="数据分析"
            description="强大的数据分析和可视化工具"
            icon={<DocumentChartBarIcon className="h-8 w-8" />}
          />
        </div>
        <div className="mt-12">
          <div className="flex justify-between items-center mb-6">
            <h2 className="text-2xl font-semibold text-gray-800">平台公告</h2>
            {isTeacherOrAdmin && (
              <Link href="/announcements/new">
                <Button variant="primary">发布新公告</Button>
              </Link>
            )}
          </div>
          <AnnouncementList />
        </div>
      </main>
    </div>
  )
}
//本来准备写一个，写一半发现有公告组件，遂拼进来

function FeatureCard({ title, description, icon }: {
  title: string
  description: string
  icon: React.ReactNode
}) {
  return (
    <div className="bg-white rounded-lg shadow-lg p-6">
      <div className="text-primary-600 mb-4">
        {icon}
      </div>
      <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
      <p className="text-gray-600">{description}</p>
    </div>
  )
}

import { BeakerIcon, ChartBarIcon, DocumentChartBarIcon } from '@heroicons/react/24/outline'
import {ReactNode} from "react";
import {ACTION_UNHANDLED_ERROR} from "next/dist/client/components/react-dev-overlay/internal/error-overlay-reducer";